<template>
  <view :class="classArr">
    <template v-if="$slots.default">
      <slot></slot>
    </template>
    <template v-else>
      <IBizRow :class="ns.b('content')" :layout="modelData.layout">
        <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
          <IBizCol
            :layoutPos="panelItem.layoutPos"
            :state="controller.panelItems[panelItem.id!].state"
          >
            <template v-if="renderPanelItem">
              {{
                renderPanelItem(panelItem, {
                  providers: controller.providers,
                  panelItems: controller.panelItems,
                })
              }}
            </template>
          </IBizCol>
        </template>
      </IBizRow>
    </template>
  </view>
</template>

<script setup lang="ts">
import { IPanelItemProvider, IPanelItemController } from '@ibiz-template/runtime'
import { IPanelContainer, IPanelItem } from '@ibiz/model-core'
import { computed, inject, reactive } from 'vue'
import { useNamespace } from '@/use'
import { SingleDataContainerController } from './i-biz-single-data-container.controller'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: SingleDataContainerController,
    required: true,
  },
})

// 获取命名空间和计算类名数组
const ns = useNamespace('single-data-container')
const { id } = props.modelData

// 面板成员state响应式
const keys = Object.keys(props.controller.panelItems)
keys.forEach((key) => {
  const panelItem = props.controller.panelItems[key]
  panelItem.state = reactive(panelItem.state)
})

// 获取上层的绘制函数
const renderPanelItem = inject<
  (
    panelItem: IPanelItem,
    options?: {
      providers: {
        [key: string]: IPanelItemProvider
      }
      panelItems: {
        [key: string]: IPanelItemController
      }
    },
  ) => any
>('renderPanelItem')!

const classArr = computed(() => {
  const result: Array<string | false> = [ns.b(), ns.m(id), ...props.controller.containerClass]
  return result
})
</script>
<style lang="scss">
@import './i-biz-single-data-container';
</style>
